const path = require('path')
// 启用更新的第2步
const webpack = require('webpack')
// 导入在内存中生成html页面的插件
// 只要是插件，都一定要放到 plugins 节点中去
// 这个插件的两个作用：
// 1、自动在内存中根据指定页面生成一个内存的页面
// 2、自动把打包好的 bundle.js 添加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，其实就是一个JS文件，通过 Node 中的模块操作，向外暴漏了一个配置对象
module.exports = {
    mode: "development",
    // 在配置文件中，需要手动指定入口文件（main.js）和出口文件（bundle.js）
    // 入口，表示要使用 webpack 打包哪个文件
    entry: path.join(__dirname, './src/main.js'),
    // 这是输出文件相关的配置
    output: {
        // 指定打包好的文件，输出到哪个目录中去
        path: path.join(__dirname, './dist'),
        // 这是指定输出文件的名称
        filename: 'bundle.js'
    },

    // 这是配置 webpack-dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    // --open --port 8080 --contentBase src --hot
    devServer: {
        open: true,  // 自动打开浏览器
        port: 8080,  // 设置我们启动的运行端口
        contentBase: 'src',  // 指定托管的根目录
        hot: true  // 启用热更新的第1步，共3步
    },

    plugins: [ // 配置插件的节点
        // new 一个热更新的模块对象，这是启用热更新的第3步
        new webpack.HotModuleReplacementPlugin(),
        // 这是创建一个在内存中生成html页面的插件
        new htmlWebpackPlugin({
            // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            template: path.join(__dirname, './src/index.html'), 
            // 指定生成页面的名称
            filename: 'index.html'
        })  
    ],

    // 这个节点用于配置所有的第三方模块加载器
    module: {
        rules: [  // 所有第三方模块的匹配规则
            // 配置处理 .css 文件的第三方loader规则
            { test: /\.css$/, use:['style-loader', 'css-loader'] },
            // 配置处理 .less 文件的第三方 loader 规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader' ]},
            // 配置处理 .scss 文件的第三方loader规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
        ]
    }
}

// 当我们在控制台，直接输入 webpack 命令执行的时候，webpack做了以下几步：
// 1、首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口；
// 2、webpack就会去项目的根目录中，查找一个叫‘webpack.config.js’的配置文件；
// 3、当找到了配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，
//    就得到了配置文件中导出的配置对象；
// 4、当webpack拿到了配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；